import React from 'react';
import { createRoot } from 'react-dom/client';
/**
 * 高阶组件还可以实现反向继承
 * 比如我们开发一个项目，使用到了别人提供的一个组件Button,结果发现不太好用，我们需要修改
 * 但是我们又没有权限直接修改别人的代码，所以就需要在别人源码基础上进行修改
 */
class Button extends React.Component{
    render(){
        return (
            <button/>
        )
    }
}
function enhanceButton(Button){
    //让此子类继承自父类Button
    return class extends Button{
        state = {number:0}
        handleClick = ()=>{
            this.setState({number:this.state.number+1});
        }
        render(){
            //在子类的render方法中，调用父类的render方法，返回React元素，也就是要渲染的虚拟DOM
            const element = super.render();
            //Uncaught TypeError: Cannot add property children, object is not extensible
            //element.props.children = this.state.number;
            //可以使用cloneElement克隆方法，基于老元素(老虚拟DOM)，克隆一个新的元素(新的虚拟DOM)出来
            let newProps = {onClick:this.handleClick};
            //1参数指定你要克隆哪个元素(虚拟DOM)
            //2参数需要传递的新属性对象
            //3参数新的儿子
            return React.cloneElement(element,newProps,this.state.number);
        }
    }
}
//1.让button儿子变成从0开始的数字，每点一次，就加1
const EnhancedButton = enhanceButton(Button)
let element = <EnhancedButton/>
let root = createRoot(document.getElementById('root'))
root.render(element);
